<template>
  <div>
    <li>
      <h3>姓名：{{ name }}</h3>
      <p>
        爱好：
        <span v-for="item in hobby" :key="item">{{ item }}</span>
      </p>
      <p>{{ count }}</p>
    </li>
  </div>
</template>
<script>
export default {
  name: 'Item',
  // props的第一种写法：数组写法
  // props: ['name', 'hobby'],

  // props的第二种写法：对象限制类型写法
  // props: {
  //   name: String,
  //   hobby: Array,
  //   count: Number,
  // },

  // props的第三种写法：对类型的各种限制的写法
  props: {
    name: {
      type: String,
      required: true,
      default: '张三',
    },
    hobby: Array,
    count: {
      // validator是用来给某个props做自定义限制规则的，参数value就是props接收的值，如果函数返回return，则通过校验，否则不通过
      Validator(value) {
        const arr = [0, 3, 5, 9];
        return arr.includes(value);
      },
    },
  },
};
</script>
<style></style>
